<template>
    <div class="w-full">
        <assets-head :title="$t('帮助')"  />
        <div class="px-32 pt-40 c2cColor">
            <div class="text-center mb-40 font-700">
                <div class="flex items-center justify-center" @click="$router.push({ path: '/chat'})">
                    <van-badge class="w-35 h-33 mr-22" :content="0">
                        <img class="w-full h-full " src="~@/assets/image/c2c/Vector.png" alt="">
                    </van-badge>
                    <div class="font-28">{{$t('联系买家')}}</div>
                </div>
            </div>
            <div class="mb-40">
               <p class="text-grey mb-10">Q:{{ $t('买家不付款，也没有回复怎么办？')}}</p>
               <p >
                    A:{{ $t('此订单有付款时间限制')}}&nbsp;<van-count-down class="currentColor" style="display:inline-block" @finish="finish" :time="fullTime"  format="mm:ss"  ></van-count-down>
                </p>
            </div>
            <div class="mb-40">
                <p class="text-grey mb-10">Q:{{ $t('我可以要求取消订单么？', { 'TITLE': TITLE })}}</p>
                <p>A:{{TITLE}}&nbsp;{{ $t('无法帮助你取消订单。买家可能在下单后根据您选择的付款方式付款。')}}</p>
            </div>
            <div class="mb-40">
                <p class="text-grey mb-10">Q:{{ $t('为什么订单支付时限这么长？')}}</p>
                <p>A:{{ $t('付款时限由广告方设定。部分支付方式不支持实时支付。这使广告方有足够的时间来确认付款状态。提示：您可以在C2C自选区选择支付时限较短的广告进行下单。')}}</p>
            </div>
            <div class="mb-40">
                <p class="text-grey mb-10">Q:{{ $t('我还没有收到货款，如果买家要求我提前放币怎么办？')}}</p>
                <p>A:{{ $t('首先确保您已收到付款。一旦您点击我已确认收款,您的数字货币将立即被释放给买家。我们将无法追回您的资产损失。')}}</p>
            </div>
            <div class="mb-40">
                <p class="text-grey mb-10">Q:{{ $t('收到买家付款后订单被取消了怎么办？')}}</p>
                <p>A:{{ $t('与买家沟通再下单或退款给买家以避免申述')}}</p>
            </div>
        </div>
        <template v-if="state==0">
            <button class="text-grey h-97 lh-97 w-762 rounded-lg text-center fixed" :disabled="!showBtn"
                :class="showBtn ? 'btnMain' :'grey_bg'" style="bottom:44px;left:16px;right:16px;border:0"
                @click="toshensu">{{ $t('申述')}}</button>
        </template>
        <template v-else>
            <button  class="text-white h-97 lh-97 w-762 rounded-lg text-center fixed btnMain"   style="bottom:44px;left:16px;right:16px;border:0" @click="toshensu">{{ $t('申述')}}</button>
        </template>
    </div>
</template>

<script>
import {
    Badge,
    CountDown
} from "vant";
import assetsHead from "@/components/assets-head";
    export default {
        props: ['expireTimeRemain'],
        computed: {
            fullTime() {
                return this.time * 1 * 1000;
                // return parseInt(this.time) * 60
            }
        },
        components: {
            assetsHead,
            [Badge.name]: Badge,
            [CountDown.name]: CountDown,
        },
        created(){
            this.time = this.$route.query.expireTimeRemain
            this.state = this.$route.query.state
        },
        data(){
            return {
                showBtn:false,
                state:'0'
            }
        },
        methods: {
            finish(){
                this.showBtn =true
            },
            toshensu(){
                this.$router.push('/appeal/page')
            },
        }
    }
</script>

<style lang="scss" scoped>
.currentColor{
    color: $color_main!important;
}
</style>